<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="使用场景" prop="redScenario">
                <el-radio-group v-model="ruleForm.redScenario">
                    <el-radio label="发送客户">发送客户</el-radio>
                    <el-radio label="发送客户群">发送客户群</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="ruleForm.redScenario == '发送客户'">
                <el-form-item label="红包类型" prop="redType" style="width: 750px">
                    <el-radio-group v-model="ruleForm.redType">
                        <el-radio label="普通红包">普通红包</el-radio>
                    </el-radio-group>
                    <div class="m-alert">
                        <span class="el-icon-info"></span>
                        <div>
                            <div>普通红包：设置单个红包金额及红包个数，每个红包的金额固定</div>
                            <div>拼手气红包：设置红包总金额及红包个数，将红包金额分成设置个数的红包，每个红包的金额随机</div>
                        </div>
                    </div>
                </el-form-item>
            </div>
            <div v-if="ruleForm.redScenario == '发送客户群'">
                <el-form-item label="红包类型" prop="redType" style="width: 750px">
                    <el-radio-group v-model="ruleForm.redType">
                        <el-radio label="普通红包">普通红包</el-radio>
                        <el-radio label="拼手气红包">拼手气红包</el-radio>
                    </el-radio-group>
                    <div class="m-alert">
                        <span class="el-icon-info"></span>
                        <div>
                            <div>普通红包：设置单个红包金额及红包个数，每个红包的金额固定</div>
                            <div>拼手气红包：设置红包总金额及红包个数，将红包金额分成设置个数的红包，每个红包的金额随机</div>
                        </div>
                    </div>
                </el-form-item>
            </div>
            <el-form-item label="红包个数" prop="redNumber">
                <el-input v-model="ruleForm.redNumber" style="width: 220px"></el-input>
                个
            </el-form-item>
            <el-form-item label="红包总金额" prop="redAmount">
                <el-input v-model="ruleForm.redAmount" style="width: 220px"></el-input>
                元
            </el-form-item>
            <el-form-item label="启用状态" prop="state">
                <el-switch v-model="ruleForm.state"></el-switch>
            </el-form-item>
            <el-form-item label="祝福语" prop="redBenediction">
                <el-input v-model="ruleForm.redBenediction" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="发送名义" prop="inName">
                <el-radio-group v-model="ruleForm.inName">
                    <el-radio label="企业名义">企业名义</el-radio>
                    <el-radio label="员工名义">员工名义</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="ruleForm.inName == '企业名义'">
                <el-form-item label="企业LOGO" prop="logo">
                    <el-upload
                            v-model="ruleForm.logo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="企业名称" prop="businessName">
                    <el-input v-model="ruleForm.businessName" style="width: 220px"></el-input>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button @click="back">返回列表</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            ruleForm: {
                redScenario: '发送客户',
                redType: '普通红包',
                redNumber: '',
                redAmount: '',
                state: true,
                redBenediction: '恭喜发财，大吉大利',
                inName: '',
                logo: '',
                businessName: '',
                redStatus: ''
            },
            rules: {
                redScenario: [
                    {required: true, message: '请选择使用场景', trigger: 'change'}
                ],
                redType: [
                    {required: true, message: '请选择红包类型', trigger: 'change'}
                ],
                redNumber: [
                    {required: true, message: '请输入红包个数', trigger: 'blur'}
                ],
                redAmount: [
                    {required: true, message: '请输入红包总金额', trigger: 'blur'}
                ],
                inName: [
                    {required: true, message: '请选择发送名义', trigger: 'change'}
                ],
                logo: [
                    {required: true, message: '请上传企业logo', trigger: 'blur'}
                ],
                businessName: [
                    {required: true, message: '请输入企业名称', trigger: 'blur'}
                ]
            },
        }
    },
    methods: {
        //返回
        back() {
            this.$emit("currentHandler", "list")
        },
        submitForm() {
            let ruleForm = this.ruleForm
            if (ruleForm.state){
                ruleForm['redStatus'] = '1'
            } else {
                ruleForm['redStatus'] = '2'
            }
            let redEnvelopeTemplate = {
                redScenario: ruleForm.redScenario,
                redType: ruleForm.redType,
                redNumber: ruleForm.redNumber,
                redAmount: ruleForm.redAmount,
                redStatus: ruleForm.redStatus,
                redBenediction: ruleForm.redBenediction,
                inName: ruleForm.inName,
                logo: ruleForm.logo,
                businessName: ruleForm.businessName,
                empId: 'DongPeng'
            }
            this.$request("/api/redEnvelopeTemplate/addRedEnvelopeTemplate/1_0", redEnvelopeTemplate, "POST").then((data) => {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                })
                this.$emit("currentHandler", "list")
            })
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style scoped>

</style>
